<!-- 密码强度 -->
<template>
    <div class="password_level">
        <div class="levels">
            <div v-for="i in level" :key="i" class="level" :class="['level_' + level]"></div>
        </div>

        <div class="text" :class="['text_' + level]">
            {{ t('password_level') }}：{{ valMap[level] }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props: any = defineProps({
    password: {
        type: String,
        default: ''
    }
})

const valMap: any = ref({
    1: t('password_level_1'),
    2: t('password_level_2'),
    3: t('password_level_3'),
})
const level: any = computed(() => {
    return checkPasswordStrength(props.password)
})

function checkPasswordStrength(password: any) {
    let score = 0;
    // 检查是否包含英文
    if (/[a-zA-Z]/.test(password)) {
        score += 1;
    }
    // 检查是否包含数字
    if (/\d/.test(password)) {
        score += 1;
    }
    // 检查是否包含符号
    if (/[\W_]/.test(password)) {
        score += 1;
    }
    // 检查是否同时包含英文大小写
    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) {
        score += 1;
    }
    if (score <= 1) return 1
    if (score < 4) return 2
    return 3
}
</script>

<style lang="scss" scoped>
.password_level {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .levels {
        display: flex;
        align-items: center;

        .level {
            width: 32px;
            height: 4px;
            border-radius: 2px;
            background: #1D1C3C;
            margin-right: 8px;
        }

        .level_1 {
            background-color: #E43939;
        }

        .level_2 {
            background-color: #FF9F69;
        }

        .level_3 {
            background-color: #1DBA8B;
        }
    }

    .text {
        color: #1D1C3C;
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
    }

    .text_1 {
        color: #E43939;
    }

    .text_2 {
        color: #FF9F69;
    }

    .text_3 {
        color: #1DBA8B;
    }
}
</style>